<script>
import {getListByType} from "@/api/aihuman/humanAssets/soundType";
import {getActionPageList, getPackList} from "@/api/aihuman/humanAssets/actionType";

export default {
  name: "humanActionDialog",
  data() {
    return {
      dialogVisible: false,
      activeName: '',
      tabsList: [],
      tableData: [],
      costumesType: '',
      paging: {
        total: 0,
        page: 1,
        size: 10
      },
      selectedList: [],
    }
  },
  methods: {
    handleTab({name}) {
      this.paging.page = 1
      this.tableData = []
      this.getList()
    },
    getList() {
      this.$nextTick(async () => {
        let params = {
          groupId: this.activeName,
          pageNo: this.paging.page,
          type: this.costumesType,
          pageSize: this.paging.size,
          status: 0
        }
        const {data} = await getPackList(params)
        this.tableData = data.data.records
        this.paging.total = data.data.total
      })
    },
    async getType() {
      const {data} = await getListByType({type: 1})
      this.tabsList = data.data
      this.activeName = this.tabsList[0].id

      this.getList()

    },
    openDialog(selectedData) {
      this.dialogVisible = true
      this.getType()
      if (selectedData.length === 0) {
        this.selectedList = []
      } else {
        this.selectedList = [...selectedData]
      }
    },

    handleSelect(item) {
      this.selectedList.push(item)
    },
    removeSelect(item) {
      this.selectedList = this.selectedList.filter(el => el.id !== item.id)
    },
    submitData() {
      if (this.selectedList.length === 0) {
        this.$message.error('请选择数据')
        return false
      }
      this.$emit('get-select', this.selectedList)
      this.dialogVisible = false
    }
  }
}
</script>

<template>
  <huilan-dialog
    title="选择动作"
    :visible.sync="dialogVisible"
    width="70%"
    append-to-body
  >

    <el-row :gutter="20">
      <el-col :span="18">
        <el-tabs v-model="activeName" @tab-click="handleTab">
          <el-tab-pane
            v-for="(item) in tabsList"
            :key="item.id"
            :label="item.groupName"
            :name="item.id">
          </el-tab-pane>
        </el-tabs>

        <el-table
          :data="tableData"
          border
          ref="multipleTable"
          width="100%"
          height="400px"
          :header-cell-style="{background: '#fafafa'}"
          style="width: 100%">
          <el-table-column
            v-if="false"
            type="selection"
            reserve-selection
            width="55">
          </el-table-column>
          <el-table-column
            prop="name"
            label="资源包名称">
          </el-table-column>
          <el-table-column
            prop="id"
            label="id">
          </el-table-column>
          <el-table-column
            prop="name"
            label="类型">
            <template #default="{row}">
              {{ row.type === 3 ? 'Web3D' : 'UE3D' }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" #default="{row}">
            <el-button
              type="text"
              size="small"
              icon="el-icon-plus"
              :disabled="selectedList.length > 0"
              @click="handleSelect(row)"
            >添加
            </el-button>
          </el-table-column>
        </el-table>

        <div style="display: flex; justify-content: flex-end;padding: 10px 0">
          <el-pagination
            background
            @size-change="getList"
            @current-change="getList"
            :current-page.sync="paging.page"
            :page-sizes="[10, 20, 30, 40]"
            :page-size.sync="paging.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="paging.total">
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="select-box">
          <header>
            已选择数据
          </header>
          <div class="select-body">
            <ul>
              <li v-for="item in selectedList" :key="item.id">
                <div>
                  {{ item.name }}
                </div>
                <div>
                  <el-button type="text" @click="removeSelect(item)"><i class="el-icon-close"></i></el-button>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </el-col>
    </el-row>

    <template #footer>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitData">确 定</el-button>
    </template>
  </huilan-dialog>
</template>

<style scoped lang="scss">
.select-body {
  height: 411px;
  overflow: auto;

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;

      div:first-child {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 80%;
      }

    }
  }
}

.select-box {
  border: 1px solid #ddd;

  header {
    border-bottom: 1px solid #ddd;
    height: 40px;
    display: flex;
    align-items: center;
    padding: 0 20px;
  }
}
</style>
